import React, { useEffect, useState } from "react";
import '../proof.css';
import '../../../App.css'
import '../../Login/login.css';
import { useHistory, useLocation } from "react-router-dom/cjs/react-router-dom";
import { Mask, DotLoading, Toast } from "antd-mobile";
import { useDispatch, useSelector } from "react-redux";
import { PageTag } from "@/utils/pageTag";
import ProofNavigateBar from "@/components/ProofNavigateBar";
import { saveEvent } from "@/store/actions/saveEvent";
import AddFavorite from "@/components/AddFavorite";
import AddHomeEvent from "@/utils/addHomeEvent";
import { WALLET_LIST_REQ_FAIL, WALLET_LIST_REQ_SUCCESS, bindWallet, getWalletList } from "@/store/actions/walletList";
import icon_wallet_orange from "@/assets/icon_wallet_orange.png"
import AddToHomeGifDialog from "@/components/AddToHomeGifDialog/AddToHomeGifDialog";
import FormInput from "@/components/FormInput";


/**
 * 钱包-wave页
 */
export default function WalletOrangeBind() {

    //loading状态
    const [maskVisible, setMaskVisible] = useState(false)

    //显示add home弹框
    const [addHomeMaskVisible, setAddHomeMaskVisible] = useState(false);
    const [addHomeMaskIsHomeMode, setAddHomeMaskIsHomeMode] = useState(true);

    //号码输入
    const [walletForm, setWalletForm] = useState({
        mobile: '',
        mobileConfirm: ''
    });

    // 获取路由历史 history 对象
    const history = useHistory()

    // 获取路由信息 location 对象
    const location = useLocation()

    //获取 Redux 分发器
    const dispatch = useDispatch()

    //获取Redux Store中的用户状态信息
    const userStateInfo = useSelector(state => state.userState)

    //获取Redux Store中的状态信息
    const walletListInfo = useSelector(state => state.walletList)

    //获取Redux Store中的用户状态信息
    // const userNotExistInfo = useSelector(state => state.userNotExist)

    //查询用户钱包列表
    const checkWalletListInfo = async () => {
        console.log("ProofWalletList-checkWalletListInfo: ");

        //获取用户状态
        try {
            //显示loading
            setMaskVisible(true)

            //获取Action
            const action = getWalletList(PageTag.PROOF_WALLET_LIST)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    //点击返回
    const onHandleNavGoBack = () => {
        console.log("go back")
        history.replace('/proofwalletlist')
    }

    // 点击保存绑卡状态监听
    const onHandleWalletSave = () => {
        //保存 wallet
        doBindWallet()
    }

    // 点击绑定orange
    const onHandleWalletBindOthers = () => {
        history.replace('/proofwalletmorebind')
    }

    // 点击add home监听
    const onHandleAddToHome = (type) => {
        console.log(`点击add home监听: ${type}`)
        if (type === 'home') {
            AddHomeEvent.onHandleAddHomeEventClick()
        } else {
            AddHomeEvent.onHandleAddFavoriteEventClick()
        }
    }

    // 关闭add home
    const onHandleAddToHomeClose = () => {
        console.log(`点击close add home监听`)
        setAddHomeMaskVisible(false)
    }


    //输入监听
    const onHandleInputMobileChange = (value) => {
        //更新输入状态
        try {
            const newState = { ...walletForm }
            newState.mobile = value
            setWalletForm(newState)

        } catch (e) {
            console.log(e)
        }
    }

    //输入监听
    const onHandleInputMobileConfirmChange = (value) => {
        //更新输入状态
        try {
            const newState = { ...walletForm }
            newState.mobileConfirm = value
            setWalletForm(newState)

        } catch (e) {
            console.log(e)
        }
    }

    //绑定钱包返回
    const onBindWalletCallback = (success) => {
        //显示loading
        setMaskVisible(false)

        if (success) {
            // history.replace('/proofwalletlist')
            history.replace('/proofwalletmorebind')
        }
    }

    //绑定钱包
    const doBindWallet = async () => {
        try {
            //判断是否可以提交
            if (walletForm.mobile.length === 0) {
                Toast.show("Veuillez entrer le bon compte", 1)
                return
            }
            if (walletForm.mobile !== walletForm.mobileConfirm) {
                Toast.show("Veuillez entrer le bon compte", 1)
                return
            }

            //显示loading
            setMaskVisible(true)

            //获取Action
            const action = bindWallet(walletForm.mobile, "Orange", onBindWalletCallback)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    //启动时请求首页额度
    useEffect(() => {
        //获取用户状态
        //checkUserStateInfo()

        //获取用户银行卡列表
        //checkWalletListInfo()

        //打点
        doHitEvent("PROOF_WALLET_ORANGE_BIND_START")

        return () => {
            //打点
            doHitEvent("PROOF_WALLET_ORANGE_BIND_END")
        }
    }, [])

    //监听用户是否存在
    // useEffect(() => {
    //     if (userNotExistInfo.notExist === true) {
    //         //history.replace('/login')
    //         history.replace('/loginfb')
    //     }
    // }, [userNotExistInfo])


    //监听钱包列表接口返回
    useEffect(() => {
        console.log("ProofWalletList-监听钱包列表接口返回")
        console.log(walletListInfo)
        //获取短信发送成功返回
        if (walletListInfo.status === WALLET_LIST_REQ_SUCCESS) {
            //关闭loading
            setMaskVisible(false)

        } else if (walletListInfo.status === WALLET_LIST_REQ_FAIL) {
            //关闭loading
            setMaskVisible(false)
        }
    }, [walletListInfo])

    return (
        <div className="proofRoot">
            {/* <NavBar onBack={() => { history.goBack() }} style={{ 'width': '100%', 'backgroundColor': 'white' }}>Proof</NavBar> */}
            <ProofNavigateBar theme="white" onBackClick={onHandleNavGoBack} onAddFavorite={() => { setAddHomeMaskIsHomeMode(false); setAddHomeMaskVisible(true) }} onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }}>Confirmer le compte</ProofNavigateBar>

            {/* 使用添加 home screen bar */}
            {/* <AddFavorite onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }} /> */}

            <div className="proofContent">
                {/* wave类型 */}
                <div className="proofItemList proofMarginTop16Px" >
                    <div className="proofItemWalletContent">
                        <img className="proofItemWalletLogo" src={icon_wallet_orange} alt="" />
                        <span className="proofItemWalletType">Orange Money</span>
                    </div>
                </div>

                {/* 新增绑卡 */}
                <div className="proofItemList proofMarginTop24Px">
                    <FormInput
                        value={walletForm.mobile}
                        onChange={e => { onHandleInputMobileChange(e) }}
                        placeholder="Entrez numéro de téléphone"
                        title="Numéro de téléphone"
                        autoComplete="off" />
                </div>

                <div className="proofItemList">
                    <FormInput
                        value={walletForm.mobileConfirm}
                        onChange={e => { onHandleInputMobileConfirmChange(e) }}
                        placeholder="Entrez numéro de téléphone"
                        title="Confirmer le numéro de téléphone à nouveau"
                        autoComplete="off" />
                </div>

                {/* 点击添加 */}
                <div className="proofApplyBtn proofTopMargin40Px proofMarginBottomNone" onClick={onHandleWalletSave}>
                    <div className="mainButtonGradient">Ajouter</div>
                </div>

                {/* 点击绑orange */}
                <div className="proofCancelBtn" onClick={onHandleWalletBindOthers}>
                    <div className="mainButtonStroke">je n'ai pas Orange</div>
                </div>
            </div>


            {/* add home gif dialog */}
            <AddToHomeGifDialog visible={addHomeMaskVisible} onConfirm={onHandleAddToHome} onClose={onHandleAddToHomeClose} isHomeMode={addHomeMaskIsHomeMode} />

            <Mask visible={maskVisible} opacity={0.1}
                onMaskClick={() => { }}>
                <div className="overlayContent">
                    <span style={{ fontSize: 24, color: '#ff3141' }} >
                        <DotLoading color="currentColor" />
                    </span>
                </div>
            </Mask>
        </div>
    )
}